<template>
	<view style="box-sizing: border-box;">
		<u-gap :height="innerHeight"></u-gap>
		<view style="box-sizing: border-box;" class="common_box" :style="{backgroundColor:bgColor,padding:padding}">
			<slot></slot>			
			<view class="zh"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "z-buttom-box",
		props: {
			bgColor: {
				type: String,
				default: '#fff'
			},
			padding: {
				type: String,
				default: ''
			}
		},
		computed: {
			
		},
		data() {
			return {
				innerHeight: 0
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.height()
			})
		},
		methods:{
			height() {
				let _this = this
				this.$nextTick(() => {
					let height = ""
					const query = uni.createSelectorQuery()
					query.select('.common_box').boundingClientRect()
					// query.selectViewport().scrollOffset()
					query.exec(res => {
						console.log(res[0].height, '底部高度');
						if (res[0]) _this.innerHeight = res[0].height + 30
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.common_box {
		position: fixed;
		width: 100%;
		bottom: 0;
	}

	.zh {
		// height: constant(safe-area-inset-bottom);
		height: calc(env(safe-area-inset-bottom) + 30rpx);
	}
</style>
